import React, { PureComponent } from "react";

import Home from "./pages/home";
import Profile from "./pages/profile";
import About from "./pages/about";
import Category from "./pages/category";

import store from "./store";

import "./style.css";

export class App extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      counter: store.getState().counter.counter,
    };
  }

  componentWillUnmount() {
    if (this.unsubscribe) {
      this.unsubscribe();
    }
  }

  componentDidMount() {
    this.unsubscribe = store.subscribe(() => {
      const state = store.getState().counter;
      this.setState({
        counter: state.counter,
      });
    });
  }
  render() {
    const { counter } = this.state;
    console.log("App render ", this.state);
    return (
      <div>
        <h2 className="title">redux counter : {counter} </h2>
        <div className="flex">
          <div className="flex-1">
            <Home />
          </div>
          <div className="flex-1">
            <Profile />
          </div>
          <div className="flex-1">
            <About />
          </div>
        </div>
        <hr />
        <h3>Category</h3>
        <Category />
      </div>
    );
  }
}

export default App;
